<!DOCTYPE html>
<html>
<head>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/xm-select.js"></script>

<style type="text/css">
body, html{
		width: 100%;
		height: 100%;
	}
.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
.select{
float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
}
.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
 .show{
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
	margin-left:24px;
	margin-bottom: 20px;
} 

</style>
</head>
<body>
<div style="overflow-y: auto;overflow-x: hidden;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">年份</label>
			<select class="form-control selectpicker" title="请选择年份" data-width="100px" id="yearSel" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;margin-left:26px;">场景</label>
			<select class="form-control selectpicker" title="请选择场景" data-width="100px" id="scenario" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 30px;font-weight: normal;margin-left:26px;">天</label>
			<select class="form-control selectpicker" title="请选择天" data-width="90px" id="selectday" style="float: left;margin-top: -3px;padding: 5px;width: 132px;font-weight: normal;margin-right:-20px;margin-left:-30px;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 53px;font-weight: normal;left:21px;">~</label>
			<select class="form-control selectpicker" title="请选择天" data-width="90px" id="selecttoday" style="float: left;margin-top: -3px;padding: 5px;width: 132px;font-weight: normal;margin-left:-41px"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 30px;font-weight: normal;margin-left:26px;">区域</label>
			<div  id="selectpower" style="float: left;margin-top: -7px;padding: 5px;width: 197px;font-weight: normal;margin-left:0px;"></div>

			<button class="selBtn" onclick="select()">查询</button>
		</div>
	</div>
	
	<div id="yearRenewable"  class= "show" style="width: calc(100% - 40px);min-height: 272px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">负荷曲线</span>
		</p>
		<div id="echars" style="width:100%;height:460px;display:inline-block;margin-top:-24px;margin-left:0px;margin-bottom:27px;"></div>
	</div>
</div>
</body>
<script type="text/javascript">
var projectId=this.getQueryString('projectId');
$(function(){
	getyear();
	
	
})
function getyear(){
	$.ajax({
    	url : "../g/service/Sample/getDiagramyear",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectedId = "";
            $.each(data.iyear, function(i,val){ 
            	$("#yearSel").append("<option value ='"+val+"'>"+val+"</option>");
            	if(i==0) selectedId = val;
            });
            $('#yearSel').selectpicker('refresh');
            $('#yearSel').selectpicker('val',selectedId);
          	$("#yearSel").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) {
        		var yearid = $("#yearSel").selectpicker('val');
                getScenario(yearid);
        	});
            getScenario(selectedId);
            getDay();
    	}
	})	
}
function getScenario(yearid) {
	$.ajax({
    	url : "../g/service/Sample/getPositionScenario",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId, yearid:yearid }),
         success : function(data){
        	 var selectedId = "";
             $.each(data.scenario, function(i,val){ 
            	 $("#scenario").append("<option value ='"+val+"'>"+val+"</option>");
            	 if(i==0) selectedId = val;
             });
             $('#scenario').selectpicker('refresh');
             $('#scenario').selectpicker('val',selectedId);
         }
    })
}
function  getDay(){
	$.ajax({
    	url : "../g/service/Sample/getDiagramday",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId }),
         success : function(data){
        	 var selectday = $("#selectday");
        	 var selecttoday = $("#selecttoday");
             $.each(data, function(i,val){
            	 $.each(val,function(u,value){
            		 selectday.append("<option value ='"+value+"'>"+value+"</option>");
                     selecttoday.append("<option value ='"+value+"'>"+value+"</option>");
            	 })
             });
             $('#selectday').selectpicker('refresh');
             $('#selecttoday').selectpicker('refresh');
             $('#selectday').selectpicker('val', 1);
             $('#selecttoday').selectpicker('val', 1);
             powerUnitname();
             
         }
    })
}

function powerUnitname() {
    $.ajax({
    	url : "../g/service/Sample/getDiagramname",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectpower=$("#selectpower");
        	var dataList = [];
            $.each(data.iyear, function(i,val){
            	dataList.push({"name":val, "value":val})
            });
            demo1= xmSelect.render({
           		el:'#selectpower',
           		filterable: true,
           		initValue:[dataList[0]],
           		theme: {
           			color: '#409EFF',
           		},
        		toolbar: {
        	        show: true,
        	        list: ['ALL', 'CLEAR']
        	    },
           	    height:"200px",
           		language: 'zn',
           		data: dataList
            })
			chushihua();
    	}
    })
}
    
function select(){
	var year = document.getElementById("yearSel").value;
	var scenario = document.getElementById("scenario").value;
	var ex2 = Number(document.getElementById("selecttoday").value);
	var ex1  = Number(document.getElementById("selectday").value);
	var powername=demo1.getValue();
	if(ex1 > ex2){
		alert("开始时间不能大于结束时间");
		return
	};
   
	getPowerdata(year,scenario,ex1,ex2,powername);
}
function chushihua(){
	var year = document.getElementById("yearSel").value;
	var scenario = document.getElementById("scenario").value;
	var ex2 = Number(document.getElementById("selecttoday").value);
	var ex1  = Number(document.getElementById("selectday").value);
	var powername=demo1.getValue();
	if(ex1 > ex2){
		alert("开始时间不能大于结束时间");
		return
	};
   
	getPowerdata(year,scenario,ex1,ex2,powername);
}

function getPowerdata(year,scenario,ex1,ex2,powername){
	var NameArr=[];
	var arr={};
	var dataList = [];
	var hour=[];
	$.ajax({
    	url : "../g/service/Sample/getDiagramdata",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId,"scenario":scenario , "year":year,"ex1":ex1,"ex2":ex2,"Diagramname":powername}),
        success : function(data){
        	for(var item of data.powerData){
        		let type = item.unitname;
        		if(arr[type]){
        			arr[type].push(item.val);
        			arr[type+"name"].push(item.ex2+'-'+item.hh);
        		}else{
        			arr[type] = [];
        			arr[type+"name"] = [];
        			arr[type].push(item.val);
        			arr[type+"name"].push(item.ex2+'-'+item.hh);
        			NameArr.push(type);
        		}
        	};
        	for(var name of NameArr){
        		console.log(name);
        		hour = arr[name+"name"];
        		dataList.push({"name":name,"data":arr[name], "type":'line',
        		      "stack": 'Total',"showSymbol": false,})
        	}
        	var chartDom = document.getElementById('echars');
        	var myChart = echarts.init(chartDom);
        	var option;

        	option = {
        		title: { text: '' },
        	  	tooltip: { trigger: 'axis' },
        	  	legend: { data: NameArr },
        	  	grid: {
	        	    left: '3%',
	        	    right: '5%',
	        	    bottom: '10%',
	        	    containLabel: true
        	  	},
   				toolbox: {
   					show: true,
   					right: 30,
   					itemSize: 20,
   					itemGap: 12,
   				    feature: {
   				    	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(" "+option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = `负荷曲线.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:"负荷曲线",icon:"image://../images/downpic.png"}
   				    }
				},
        	  	xAxis: {
	        		name:"天-时",
	        	    type: 'category',
	        	    boundaryGap: false,
	        	    data: hour
        	  	},
        	  	yAxis: {
        		  	name:'MW',
        		  	axisLine: { show:false },
        	    	type: 'value'
        	  	},
        	  	dataZoom:[{
     		 　　		type:"inside",//详细配置可见echarts官网
     		 　　}, {
     				orient: "horizontal",
	               	show: this.zoomShow,//控制滚动条显示隐藏
		            realtime: true, //拖动滚动条时是否动态的更新图表数据
		            height: 25, //滚动条高度
		            start: 0, //滚动条开始位置（共100等份）
		            end: this.endValue,//滚动条结束位置
		            bottom: "1.5%",
               	}],
        		series: dataList
        	};

    		myChart.clear();
        	option && myChart.setOption(option);
    		window.addEventListener("resize", () => {
    			if(myChart){
    				myChart.resize()
    			}
    		})
		}
	});
}
function getQueryString (name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}
</script>
</html>